<!--
 * @Author: 哈兰德
 * @Description: 颜色选择器封装
-->
<template>
  <div class="color-picker">
    <el-form-item :label="label" label-width="110px">
      <div class="flex">
        <div class="bg_picker">
          <el-color-picker 
            :value="colorValue"
            @change="changeColor"
          />
        </div>
        <el-button
          type="text"
          class="reset-span" 
          @click="resetColor"
        >
          重置
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>

export default {
  model: {
    prop: 'colorValue',
    event: 'change'
  },
  props: {
    colorValue: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    defaultColor: {
      type: String,
      required: true
    }
  },
  methods: {
    changeColor (val) {
      this.$emit('change', val)
    },
    resetColor () {
      this.$emit('change', this.defaultColor)
    }
  }

}
</script>

<style lang="less" scoped>
.color-picker {
  .flex {
    display: flex;
    align-items: center;
  }
  .bg_picker {
    width: 120px;
    height: 0.8rem;
    ::v-deep .el-color-picker__trigger {
      width: 100px;
    }
  }
}
</style>
